<template>
  <div class="comp-user-log">
    <div v-if="step === 0" class="step">
      <div class="start-title">人生日历</div>
      <el-button v-if="step === 0" size="large" @click="step += 1"> 开始 </el-button>
    </div>
    <div v-if="step === 1" class="step step-1">
      <div class="question-text">怎么称呼您</div>
      <el-input
        v-model="username"
        class="question-input"
        size="large"
        @input="
          (val: string) => username = val.replace(' ', '')
        "
      />
    </div>
    <div v-if="step === 2" class="step step-2">
      <div class="question-text">请选择您的生日</div>
      <el-date-picker
        v-model="birthday"
        class="question-date-picker"
        :style="{ width: '300px', maxWidth: '80%', marginBottom: '10px' }"
        type="date"
        placeholder="选择您的生日"
        size="large"
      />
    </div>
    <div :class="['btn-box', { show: step1Ok }]">
      <el-button v-if="step !== 1" size="large" @click="step -= 1"> 上一步 </el-button>
      <el-button size="large" :disabled="nextBtnDisabled" @click="nextBtnOnClick" type="primary">
        {{ step !== 2 ? '下一步' : '开始' }}
      </el-button>
    </div>
  </div>
</template>
<script lang="ts">
export default defineComponent({ name: 'CompUserLog' })
</script>
<script setup lang="ts">
import { computed, defineComponent, ref } from 'vue'
import { useLifeCalender } from '../hooks/lifeCalender'

import { format } from '@/utils/date'

const lifeCalender = useLifeCalender()

const step = ref(0)
const username = ref('')
const birthday = ref('')
const step1Ok = computed(() => username.value)
const nextBtnDisabled = computed(() => (step.value === 1 ? !step1Ok.value : !birthday.value))

function nextBtnOnClick() {
  if (step.value === 1) {
    step.value += 1
  } else {
    lifeCalender.model.setUserInfo({
      username: username.value,
      birthday: format(birthday.value, 'YYYY-MM-DD')
    })
  }
}
</script>

<style lang="scss">
@import '../theme.scss';
</style>
<style lang="scss" scoped>
.comp-user-log {
  color: var(--color);
  width: 100%;
  height: 100%;
  position: relative;
  top: -10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .step {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    & > * {
      margin-bottom: 10px;
    }
    .start-title {
      font-size: 80px;
      font-weight: 600;
      margin-bottom: 30px;
    }
    .question-text {
      font-size: 28px;
      margin-bottom: 30px;
    }
    .question-input {
      width: 300px;
      max-width: 80%;
    }
  }
  .btn-box {
    margin-top: -20px;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s, margin 0.4s;
    &.show {
      margin-top: 0;
      opacity: 1;
      z-index: 1;
    }
  }
}
</style>
